Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

Community articleLoading Images and page Masking on an X-Page
Added by ~Wendy Fezfanamarnivu | Edited by ~Wendy Fezfanamarnivu on February 23, 2010 | Version 4
expanded Abstract
collapsed Abstract
No abstract provided.
Tags: Xpages, masking, load image

Sometimes for various reasons, clicking on links in in X-page, or refreshing a view or a page may take several seconds to complete. So that users do not keep clicking on the button, or think the browser is not working, i have added a “loading image” and a mask to show people that the page is working, just a little slow.

I hope someone shows me a better way to do this… but here is my attempt.

 

1. In the css file for the page add

 <
div.loading {
   background-image: url(ajax-loader.gif);
   background-repeat: no-repeat;
   background-position: center;
   background-color:black;
}
>




2. Add a JavaScript library and name it loading, then add these lines
dojo.require('dijit.Dialog')

function loading() {
   underlay = new dijit.DialogUnderlay({'class': 'loading'});
   underlay.show();
}
function stoploading(){
   underlay.hide()
   }



3. Insert the JavaScript library loading on the page under the resources section

Now to implement this in a button that does not do a “full update”

1. In the outline on the button expand the button and click on event handler, then clcik the all properties tab.

image

2. in the onStart event enter loading()

3. in the onComplete enter stoploading()

Now to implement this in a button that does a “full update”

1. In the onClick event, choose the client tab, then enter in loading()

image


Now to implement this in view column link

1. First we have to change how it open a document, click on the onClick event.

2. Create an action on the server side to execute a script.

3. set the script to:
doc = viewEntry.getDocument();
applicationScope.docid1 =  doc.getUniversalID();



4. Create another action to open a new page, put in the page name to open, then edit document, then document id should be computed to
applicationScope.docid1




image

5. On the Client tab, enter in loading()

All of these will produce a mask covering the whole screen with a loading image in the middle like

image

image
 
Author:  Mark Hughes
Blog:  http://dominoextnd.blogspot.com 
Check out  your Lotus Notes ToDo's and Journal on the iPhone at Hughesconnect.comexternal link

expanded Attachments (0)
collapsed Attachments (0)
expanded Versions (5)
collapsed Versions (5)
Version Comparison     
VersionDateChanged by              Summary of changes
5Feb 23, 2010, 2:39:32 PM~John Dwoponeplopakol  
This version (4)Feb 23, 2010, 2:38:21 PM~Wendy Fezfanamarnivu  
3Feb 23, 2010, 2:35:45 PM~Wendy Fezfanamarnivu  
2Feb 23, 2010, 2:33:18 PM~Wendy Fezfanamarnivu  
1Feb 23, 2010, 2:28:40 PM~Wendy Fezfanamarnivu  
Copy and paste this wiki markup to link to this article from another article in this wiki.
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL
  • Privacy
  • Accessibility